<template>
	<view>
		<view class="top">




			<uni-easyinput style="width: 90%; position: relative;top: 40rpx; left: 50rpx; border-radius: 20rpx;"
				prefixIcon="map-pin-ellipse" placeholder="焦作市山阳区" suffixIcon="loop">
			</uni-easyinput>


			<uni-card :is-shadow="false" is-full
				style="position: relative; top: 120rpx; left: 20rpx;width: 90%; height: 280rpx;border-radius: 20rpx;">
				<!-- <uni-section style="margin-bottom: 200rpx; height: 200rpx;" padding> -->
				<uni-grid :column="4" :show-border="false" :square="false" @change="change">
					<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
						<view class="grid-item-box">
							<image style="border-radius: 10rpx;" class="image" :src="item.url" mode="aspectFill"
								:style="item.imageStyle" />
							<text class="text">{{ item.text }}</text>
							<view v-if="item.badge" class="grid-dot">
								<uni-badge :text="item.badge" :type="item.type" />
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
				<!-- </uni-section> -->

			</uni-card>
		</view>




		<uni-card style="margin-top: 150rpx;" title="附近加油站" extra="查看更多">

			<map style="width: 100%;height: 300rpx;" :markers="markers" :longitude="longitude" :latitude="latitude"
				@markertap="onMarkerTap" ></map>



			<view>
				商家：{{markers.name}}
			
				<view>距离{{distance}}</view>

				<navigator url="#">详情</navigator>


			</view>


		</uni-card>




		<uni-card style="height: 600rpx; " title="优惠团购">
			<view @click="chakangenduo" style="width: 100%; height: 50rpx;">查看更多
			</view>

			<!-- <uni-section style="margin-bottom: 300rpx;  width: 600rpx; height: 600rpx;" > -->


			<view
				style="    display: flex; width: 100%; height: 300rpx; justify-content: space-around; margin-top: 100rpx;">
				<navigator :url="`/pages/kk/xiangqing/xiangqing?id=${item.id}`" v-for="(item, index) in activitylist"
					:index="index" :key="index" style="width: 300rpx; height: 300rpx;">
					<image :src="item.photo" mode="aspectFill" style="width: 80%; height:60%" />

					<view style="width: 80%; height: 30%; align-items: center;">{{ item.title }}</view>

				</navigator>

			</view>

		</uni-card>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				shoplist:'',
				cheShop:'',
				distance: '',
				selectedMarker: '',


				activitylist: '',
				cheActivity: null,
				markers: '',



				latitude: "39.906217",
				longitude: "100.3912757",

				list: [{

						url: '../../../static/车辆维修1-01.png',
						text: '汽车维修',
						type: 'primary',
						imageStyle: {
							width: '50px',
							height: '50px',
							backgroundColor: 'blue'
						}
					},
					{
						url: '../../../static/保养.png',
						text: '汽车保养',

						type: 'primary',
						imageStyle: {
							width: '50px',
							height: '50px',
							backgroundColor: 'orange'
						}
					},
					// 更多项...

					{
						url: '../../../static/洗车.png',
						text: '专业洗车',
						aurl: '../zhuanyexiche/zhuanyexiche',

						type: 'primary',
						imageStyle: {
							width: '50px',
							height: '50px',
							backgroundColor: 'green'
						}
					},

					{
						url: '../../../static/加油枪 (1).png',
						text: '就近加油',
						aurl: '../../refuel/refuel_nearby/refuel_nearby',

						type: 'primary',
						imageStyle: {
							width: '50px',
							height: '50px',
							backgroundColor: '#87CEFA'
						}
					},
				]


			}
		},
		onReady() {
			this.getMyPosition()
		},
		onLoad() {
			this.getactivtiy()
			this.getshoplist()
			this.getMyPosition()
		},



		methods: {
			tiaozhuang(){
				uni.navigateTo({
					url:"../../kk/yingjijiuyuan/yingjijiuyuan"
				})
			
			
				
				
				
			},


			getshoplist() {
				let that = this

				this.$http({

					url: 'api/shop/shop/list',
					method: 'get',
					data: that.cheShop,
					success(res) {
						console.log(res)
						that.shoplist = res.data.rows
						console.log(that.shoplist)


						const markers1 = [];
						for (let i = 0; i < that.shoplist.length; i++) {
							const shop = that.shoplist[i];
							markers1.push({
								id: shop.shopId,
								latitude: shop.latitude,
								longitude: shop.longitude,
								width: 300,
							    height: 300,
								iconPath: '../../../static/poi.png',
								name:shop.shopName
								
								

							});
						};

						console.log("aaaaaaaaaaaaallllllllllll")
						console.log(markers1)
						that.markers = markers1



					}

				})


			},






			chakangenduo() {
				console.log("活动跟多")

				uni.navigateTo({
					url: "../huodonggengduo/huodonggengduo",



				});



			},


			calculateDistanceInMeters(lat1, lon1, lat2, lon2) {
				const R = 6371000; // 地球半径，单位：米    结果为：米
				//const R = 6371;  // 地球半径，单位：公里   结果为：公里
				const dLat = this.degToRad(lat2 - lat1);
				const dLon = this.degToRad(lon2 - lon1);
				const a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(this.degToRad(lat1)) * Math.cos(this.degToRad(lat2)) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				return R * c; // 距离，单位：米
			},
			// 辅助函数：将角度转换为弧度
			degToRad(deg) {
				return deg * (Math.PI / 180);
			},




			onMarkerTap(e) {


				// 点击标注点时显示商家数据
				this.selectedMarker = this.markers.find(obj => obj.id ===
					e.detail.markerId);
				if (this.selectedMarker) {
					// this.infoWindowVisible = true;
					// 这里可以添加逻辑来定位信息窗口的位置
					console.log(this.selectedMarker)


					const lat1 = this.latitude; // 北京的纬度
					const lon1 = this.longitude; // 北京的经度
					const lat2 = this.selectedMarker.latitude; // 上海的纬度
					const lon2 = this.selectedMarker.longitude; // 上海的经度
					this.distance = this.calculateDistanceInMeters(lat1, lon1, lat2, lon2);
					//  console.log(`The distance between Beijing and Shanghai is: 
					// ${distance.toFixed(2)} meters`)

				}
			},



		

			getactivtiy() {
				console.log("opop==============")

				let that = this
				this.$http({
					url: 'api/activity/activity/list',
					method: "get",
					data: that.cheActivity,
					success(res) {
						console.log("ppppppppppppppp")

						that.activitylist = res.data.rows
						console.log("actity==================")
						console.log(res.data.rows)
					}
				})

			},






			getMyPosition() {
				let that = this
				uni.getLocation({
					success(res) {
						// console.log("定位==========")
						// console.log(res)
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.markers[0].latitude = res.latitude
						that.markers[0].longitude = res.longitude

						console.log("当地的经纬度")
						console.log(res.latitude)
						console.log(res.longitude)


					},
					fail() {
						alert("定位失败")
					}
				})



			},


			toSearch(type) {
				let form = {}
				form.type = type
				uni.navigateTo({
					url: `/pages/yunRang/carMaintainReservation/cmr_search/cmr_search?form=${JSON.stringify(form)}`
				})
			},




			change(e) {
				let that = this
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})

				if (index == 0 || index == 1 || index == 2) {
					that.toSearch(that.list[index].text)

				} else {
					uni.navigateTo({
						url: that.list[index].aurl
					})
				}







			},



		}
	}
</script>
<style>
	.top {
		width: 100%;
		height: 360rpx;
		background-image: url("../../../static/8c7398129c13f67abeca14982fc8883.jpg");
	}

	.image {
		background-color: darkblue;
		width: 100px;
		height: 50px;
	}

	.text {
		font-size: 11px;
		margin-top: 5px;
	}


	.grid-item-box {
		margin-top: 60rpx;

		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0px 0;
	}
</style>










